<template>
  <div v-loading="loading" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons')
import resize from './mixins/resize'
import { moneyFormat } from '@/utils/ruoyi'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'investmentType'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    chartData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chart: null,
      loading: false,
      colorList: ['#226FFD', '#FC9200', '#22E8E9', '#0D9241', '#01ACFE', '#AD43E0'],
      dataList: [
        // { name: '成长', value: 60 },
        // { name: '早期', value: 80 },
        // { name: '成长期投资', value: 150 }
        ],
      optionData: [
        // { name: '成长', value: 60, itemStyle: { color: '#226FFD', opacity: 0.5 }},
        // { name: '早期', value: 80, itemStyle: { color: '#226DFF', opacity: 0.5 }},
        // { name: '成长期投资', value: 150, itemStyle: { color: '#FF9000', opacity: 0.5 }}
      ]
    }
  },
  watch: {
    chartData: {
      handler() {
        this.initChart()
      },
      deep: true,
      immediate: true
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      if (this.chartData.length > 0) {
        this.dataList = JSON.parse(JSON.stringify(this.chartData))
        this.optionData = JSON.parse(JSON.stringify(this.chartData))
        this.optionData.forEach((v, index) => {
          v.itemStyle = {
            color: this.colorList[index],
            opacity: 0.5
          }
        })
      }
      // console.log(this.chartData)
      this.chart = echarts.init(this.$el, null)
      this.chart.on('click', this.clickInvestType)
      this.chart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            // console.log(params)
            return `${params.marker}` + `${params.name}` + '(' + `${params.percent}%` + ')' + `<br/>` +
              '项目数量(个):' + moneyFormat(params.data.dealCount) + '<br/>' +
              '投资成本(万):' + moneyFormat(params.data.fk, 'w') + '<br/>' +
              '回款金额(万):' + moneyFormat(params.data.hk, 'w') + '<br/>' +
              '最新估值(万):' + moneyFormat(params.data.gz, 'w') + '<br/>'
          }
        },
        color: this.colorList,
        series: [
        {
            name: '',
            type: 'pie',
            center: ['50%', '60%'],
            radius: ['25%', '30%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              show: false
            },
            data: this.optionData
          },
          {
            name: '',
            type: 'pie',
            center: ['50%', '60%'],
            radius: ['30%', '43%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              position: 'outside',
              formatter: function(params) {
                return `{aa|${params.name}}\n\{cc|${params.percent}%}`
              },
              padding: [0, -50],
              rich: {
                aa: {
                  height: 25,
                  align: 'left',
                  fontSize: 12,
                  color: '#55e0ff'
                },
                cc: {
                  height: 25,
                  align: 'left',
                  fontSize: 13,
                  color: '#ffffff'
                }
              }
            },
            labelLine: {
              length: 25,
              length2: 60
            },
            data: this.dataList
          }],
        animationEasing: 'cubicInOut',
        animationDuration: 3000
      })
    },

    // 点击事件
    clickInvestType(param) {
      console.log('数据', param)
      const data = {
        type: param.data.type, // 当前下拉框选中的类型
        name: param.data.name // 当前下拉框选中的类型名称
      }
      this.$emit('clickInvestType', data)
    }
  }
}
</script>
